<template>
  <div>
    <h1>监听器</h1>
    <h1>当前的值：{{data.sum}}</h1>
    <button @click="data.arr.a[0]++">+</button>
  </div>
</template>

<script>
import {reactive,watch} from 'vue'
export default {
  setup () {
    let data=reactive({
      sum:0,
      arr:{
        a:[1,2,3,4,5]
      }
    })
    // 默认是深度监听
    watch(data,(newval)=>{
      console.log(newval.arr.a[0])
    },{immediate:true,deep:true})
    watch(()=>data.arr,()=>{
      console.log('数组变了')
    },{immediate:true,deep:true})
    return {
      data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>